<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Paint Pot (Parte 2) - App Inventor para Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c2 {border-width:0}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials/index.html">Tutoriales</a> &gt; Paint Pot (Parte 2) &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                PaintPot (Parte 2)
              </h1>
              <p>
                En este proyecto se extiende la <a href="paintpot-part1.html">Parte 1</a> del tutorial para crear puntos grandes y pequeños, para demostrar cómo se utilizan las <em>variables globales</em>.
              </p>
              <h2>
                Comenzando
              </h2>
              <p>
                Asegurate de haber completado el proceso de <a href="../../../learn/setup/index.html">configuración</a> y de tener tu proyecto <a href="paintpot-part1.html">PaintPot Parte 1</a> completo y cargado.
              </p>
              <p>
                Comienza desde donde lo dejaste al final de la Parte 1, con el proyecto abierto en in App Inventor. Usa el botón <span class="ButtonText">Save As</span> para hacer una copia de PaintPot y poder trabajar con la nueva versión sin afectar a la original. Nombra la copia como PaintPotV2 (sin espacios). Despues de guardar la copia, debes ver PaintPotV2 en el <span class="ButtonText">Diseñador</span>.
              </p>
              <h2>
                Creando las variables
              </h2>
              <p>
                El tamaño de los puntos dibujados en el lienzo está determinado por el controlador de evento <span class="Block">when DrawingCanvas.Touched</span> donde <span class="Block">call Drawing.DrawCircle</span> es llamado con <span class="ButtonText">r</span>, el radio del circulo,igual a 5. Para cambiar el grosor, todo lo que necesitamos hacer es usar diferentes valores para <span class="ButtonText">r</span>. Usa <em>r</em> = 2 for puntos pequeños y <em>r</em> = 8 para los puntos grandes.
              </p>
              <p>
                Comienza por crear nombres para estos valores:
              </p>
              <ol>
                <li>Abre el Editor de bloques, si no está ya abierto, y conecta el teléfono. El teléfono debe mostrar los botones y el lienzo que creaste anteriormente.
                </li>
                <li>En el Editor de bloques, en la columna <span class="ButtonText">Built-In</span>, abre el cajón <span class="ButtonText">Definitions</span>. Arrastra un bloque <span class="Block">def variable</span>. Cambia el texto que dice <span class="ButtonText">variable</span> a <span class="ButtonText">small</span> (pequeño). Un signo de exclamación amarillo de advertencia aparecerá en el bloque. Si pasas el ratón sobre el verás un mensaje de advertencia explicando que el bloque tiene un conector vacío.
                </li>
                <li>Necesitas llenar en el conector con un bloque de número que especifique el valor para <span class="ButtonText">small</span> — usa 2 como valor. Para crear el bloque de número, escribe el número 2. Aparecerá un menú, que muestra todos los bloques posibles, que incluyen "2" en su nombre. Haz clic en el primero, que es el número 2 en sí, y un bloque de número con el valor 2 debería aparecer. Colócalo en el bloque <span class="Block">def variable</span>. La marca amarilla de advertencia desaparecerá, porque el espacio vacío se ha llenado. (El segundo valor aparece en el menú es el bloque de matemáticas <span class="ButtonText">atan2</span>, que no vas a utilizar aquí.)
                </li>
              </ol>
              <p>
                Estos son los pasos de la secuencia:
              </p>
              <div class="imagecontainer">
                <table align="center" cellspacing="10">
                  <tr valign="top">
                    <td>
                      <img alt="" src="PaintPotAssets/vardefblocks/vb1.png" width="166">
                    </td>
                    <td>
                      <img alt="" src="PaintPotAssets/vardefblocks/vb2.png" width="166">
                    </td>
                  </tr>
                  <tr valign="top">
                    <td>
                      <img alt="" src="PaintPotAssets/vardefblocks/vb3.png" width="166">
                    </td>
                    <td>
                      <img alt="" src="PaintPotAssets/vardefblocks/vb4.png" width="166">
                    </td>
                    <td>
                      <img alt="" src="PaintPotAssets/vardefblocks/vb5.png" width="200">
                    </td>
                  </tr>
                </table>
              </div>
              <p>
                Ya has definido una variable global llamada <span class="ButtonText">small</span> cuyo valor es el número 2.
              </p>
              <p>
                Del mismo modo que para <span class="ButtonText">small</span>, define una variable global <span class="ButtonText">big</span>, cuyo valor sea 8.
              </p>
              <p>
                Por último, define una variable global <span class="ButtonText">dotsize</span> y dale un valor inicial de 2.
              </p>
              <blockquote class="notice">
                Podrías preguntarte si no sería mejor el estilo de programación para hacer que el valor inicial de <span class="ButtonText">dotsize</span> ser el valor de <span class="ButtonText">small</span> en lugar de 2. Eso sería cierto, salvo por una sutil cuestión de programación: Hacer eso supondria que <span class="ButtonText">small</span> ya tiene un valor cuando a <span class="ButtonText">dotsize</span> se asigna su valor. En App Inventor no puedes hacer suposiciones sobre el orden en que se procesarán los bloques <span class="Block">def</span>. En general, por supuesto, <em>desearás</em> especificar el orden en el que son asignadas las variables. Puedes hacer esto asignando todos los valores cuando se inicie la aplicación, usando el evento Inicio de pantalla. El tutorial <a href="http:/learn/tutorials/quizme/quizme.html">Quiz Me</a> da un ejemplo de la inicialización.
              </blockquote>
              <h2>
                El uso de variables
              </h2>
              <p>
                Ahora cambia la llamada a <span class="ButtonText">DrawCircle</span> en el controlador de eventos contacto para que utilice el valor de <span class="ButtonText">dotsize</span> en lugar de utilizar siempre 5.
              </p>En el Editor de bloques, cambiar a la columna <span class="ButtonText">My Blocks</span>, y abre el cajón <span class="ButtonText">My Definitions</span> Debes ver seis nuevos bloques, dos para cada una de las tres variables definidas:
              <ul>
                <li>Un bloque <span class="Block">global ...</span> que produce el valor de la variable
                </li>
                <li>Un bloque <span class="Block">set global ...</span> que establece la variable a un nuevo valor.
                </li>
              </ul>
              <p>
                Estos bloques se han creado de forma automática, de manera similar a la forma en que los bloques de <span class="ButtonText">x</span> e <span class="ButtonText">y</span> se crean cuando se define el controlador de evento <span class="Block">when DrawingCanvas.Touched</span> en la parte 1 de este tutorial. "Global" significa "variable global", en contraste con los argumentos de controladores de eventos, cuyos bloques están etiquetados como "valor". La diferencia es que los argumentos valor sólo son accesibles dentro del cuerpo del controlador de eventos, mientras que las variables globales son accesibles en todo el programa.
              </p>
              <ul>
                <li>Ve al controlador de eventos <span class="Block">when MyCanvas.Touched</span> y reemplaza el bloque de número 5 en <span class="Block">call DrawCircle</span> por el bloque <span class="Block">global dotsize</span> del cajón <span class="ButtonText">MyDefinitions</span>.
                </li>
              </ul>
              <h2>
                Cambio de los valores de las variables
              </h2>
              <p>
                Ahora crea una forma para cambiar dotsize de pequeño (2) a grande (8). Haz esto con los botones.
              </p>
              <ol>
                <li>En el Diseñador, arrastra un componente<span class="ButtonText">HorizontalArrangement</span> al panel de visualización debajo del componente <span class="ButtonText">DrawingCanvas</span> Nombra al componente como <span class="ButtonText">BottomButtons</span>
                </li>
                <li>Arrastra el botón <span class="ButtonText">Wipe</span> existente a <span class="ButtonText">BottomButtons</span>.
                </li>
                <li>Arrastra dos componentes botón más de la Paleta dentro de <span class="ButtonText">BottomButtons</span>, colocándolos al lado del botón <span class="ButtonText">Wipe</span>.
                </li>
                <li>Nombra los botones como <span class="ButtonText">ButtonBig</span> y <span class="ButtonText">ButtonSmall</span>, y cambia su <span class="ButtonText">Text</span> (texto) a "Big dots" y "Small dots", respectivamente.
                </li>
                <li>En el Editor de bloques bajo <span class="ButtonText">My Blocks</span>, crea un controlador de evento <span class="Block">when ... Clicked</span> desde <span class="ButtonText">ButtonSmall</span> que cambie dotsize al valor de small. Para cambiar <span class="ButtonText">dotsize</span> usa el bloque <span class="Block">set global dotsize to</span> desde el cajón <span class="ButtonText">MyDefinitions</span> y colócalo en el bloque <span class="Block">global small</span>.
                </li>
                <li>Crea un controlador de evento similar para <span class="ButtonText">ButtonBig</span>.
                </li>
              </ol>Los dos controladores de evento Click deberían tener este aspecto:
              <div class="imagecontainer">
                <img alt="" height="109" src="PaintPotAssets/PaintPot2Clicks.png" width="578">
              </div>
              <p>
                ¡Ya está! Puedes dibujar en PaintPot y usar los nuevos botones para dibujar puntos, ya sean grandes o pequeños. Ten en cuenta que al arrastrar el dedo todavía dibujas una delgada línea. Esto se debe a que los cambios que acabas de realizar no afectan a la forma en que se llama a <span class="ButtonText">DrawLine</span>.
              </p>Aquí está el programa completo en el <span class="ButtonText">Diseñador</span>
              <div class="imagecontainer">
                <img alt="" src="PaintPotAssets/PaintPotAllDesigner.png" width="600">
              </div>y en la ventana de bloques.
              <div class="imagecontainer">
                <img alt="" height="454" src="PaintPotAssets/PaintPotAllBlocks.png" width="800">
              </div>
              <blockquote class="notice">
                <em>Un error en el que puedes trabajar:</em> El programa que acabas de construir, tiene con un pequeño fallo. Si empiezas a dibujar antes de pulsar cualquiera de los botones de color para la pintura, el color de la pintura será negro, pero después de elegir un color, no hay forma de volver a negro. Piensa en cómo se puede arreglar eso.
              </blockquote>
              <h2>
                Revisión
              </h2>
              <p>
                Has creado variables globales usando bloques <span class="ButtonText">def</span> desde el cajón <span class="ButtonText">Definitions</span>.
              </p>
              <p>
                Para cada variable global que se define, App Inventor proporciona automáticamente un bloque <span class="Block">global</span> que da el valor de la variable, y un bloque <span class="Block">set global ... to</span> para cambiar el valor de la variable. Estos bloques se pueden encontrar en el cajón <span class="ButtonText">My Definitions</span>.
              </p>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license"><img alt="Creative Commons License" class="c2" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              El trabajo original de Google ha sido modificado<br>
              El trabajo modificado fue traducido del Inglés al Español<br>
              <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

